<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();

	});

	function validateTransfer() {
		var form = document.forms['transferForm'];
		var amountRegEx = /^([5-9][0-9]|[1-9][0-9]{2,})$/;
		var amount = form.amount.value;
		// Validate if the amount is in number format
		if (!amountRegEx.test(amount)){
			alert("Sorry! The transfer money amount must be at least 50$");
			return false;
		}		
		return true;
	}
</script>

<div id="content-outer" style="margin-left: 30px;">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<div id="page-heading">
			<h1>Money Transfer Form</h1>
		</div>
		<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="content-table">
			<tr>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowleft.jpg" width="20" height="300"
					alt="" /></th>
				<th class="topleft"></th>
				<td id="tbl-border-top">&nbsp;</td>
				<th class="topright"></th>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowright.jpg" width="20" height="300"
					alt="" /></th>
			</tr>
			<tr>
				<td id="tbl-border-left"></td>
				<td>
					<div id="content-table-inner">
						<div id="content-table-inner" style="padding-left: 35px;">
							<table border="0" width="100%" cellpadding="0" cellspacing="0">
								<tr valign="top">
									<td>
										<form action="addTransaction" method="post"
											onsubmit="return validateTransfer()" name="transferForm">
											<table border="0" cellpadding="0" cellspacing="0"
												id="id-form">
												<tr>
													<th valign="top">Source Account Number:</th>
													<td><select id="selectTarAccount"
														name="srcAccountNumber">
															<c:forEach var="sourceAccount" items="${sourceAccounts}">
																<option value="${sourceAccount.accountNumber}">${sourceAccount.accountNumber}</option>
															</c:forEach>
													</select></td>
													<td></td>
												</tr>
												<tr>
													<th valign="top">Target Account Number:</th>
													<td><select id="selectTarAccount"
														name="tarAccountNumber">
															<c:forEach var="targetAccount" items="${targetAccounts}">
																<option value="${targetAccount.accountNumber}">${targetAccount.accountNumber}</option>
															</c:forEach>
													</select></td>
													<td></td>
												</tr>
												<tr>
													<th valign="top">Transfer Amount</th>
													<td><input type="text" class="inp-form"
														name="amount" /></td>
												</tr>
												<br>
												<tr>
													<td></td>
													<td><button type="submit" class="btn btn-primary">Transfer</button>
													<td>
													<td></td>
												</tr>
											</table>
										</form>
									</td>
								</tr>
							</table>
							<table id="mytable">
								<thead>
									<tr>
										<th>Source Account Number</th>
										<th>Target Account Number</th>
										<th>Transfer Bank</th>
										<th>Transfer Branch</th>
										<th>Transfer Amount</th>
										<th>Transfer Date</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="transferTransaction"
										items="${transactions}">
										<tr>
											<td>${transferTransaction.srcAcc.getAccountNumber()}</td>
											<td>${transferTransaction.tarAcc.getAccountNumber()}</td>
											<td>${transferTransaction.tarAcc.getBank()}</td>
											<td>${transferTransaction.tarAcc.getBranch()}</td>
											<td>${transferTransaction.amount}</td>
											<td>${transferTransaction.date}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
				</td>
				<td id="tbl-border-right"></td>
			</tr>
			<tr>
				<th class="sized bottomleft"></th>
				<td id="tbl-border-bottom">&nbsp;</td>
				<th class="sized bottomright"></th>
			</tr>
		</table>
		<br />
	</div>
	<div class="clear">&nbsp;</div>
</div>